<template>
	<view style="border-top: 2rpx solid #DCDFE6;background-color: white;">
		<view style="display: flex;justify-content: space-around;">
			<view v-for="tabbar in tabbars" :key="tabbar.name" style="flex: 1;padding: 20rpx 0;">
				<view class="lj-tabbar-item" @click="onClick(tabbar)">
					<view class="icon-image-box">
						<image :src="tabbar.name == active ? tabbar.iconActive : tabbar.icon" mode="widthFix"
							:style="{width: iconSize + 'rpx'}" style="height: auto;" />
						<view v-show="tabbar.dot > 0" class="dot">
							{{tabbar.dot}}
						</view>
					</view>
					<view style="text-align: center;">
						<text :style="{
							'font-size' : textSize + 'rpx', 
							color: tabbar.name == active ? activeColor : inactiveColor}">
							{{tabbar.text}}
						</text>
					</view>
				</view>
			</view>
		</view>
		<view :style="{height : safeHeight + 'rpx'}" />
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		watch,
		toRefs
	} from 'vue'
	const name = 'LjTabbar'
	const SAFE_AREA_INSET_BOTTOM = 34
	// ----------
	const props = defineProps({
		active: {
			type: String,
			default: ''
		},
		tabbars: {
			default: [],
			type: Array
		},
		height: {
			type: Number,
			default: 0
		},
		iconSize: {
			type: Number,
			default: 44
		},
		textSize: {
			type: Number,
			default: 24
		},
		activeColor: {
			type: String,
			default: '#409EFF'
		},
		inactiveColor: {
			type: String,
			default: '#909399'
		},
	})
	let {
		active
	} = toRefs(props)
	const emit = defineEmits(['change', 'click'])
	// // ----------
	uni.hideTabBar({
		success: () => {
			console.log('hideTabBar: success');
		},
		fail: () => {
			console.log('hideTabBar:fail');
		}
	})
	// // ----------
	const {
		model,
		statusBarHeight
	} = uni.getSystemInfoSync()
	let isIphoneX = ref(false)
	if ((model.indexOf('iPhone') > -1 && statusBarHeight > 20) ||
		model.indexOf('iPhone X') > -1 ||
		model.indexOf('iPhone 1') > -1) {
		isIphoneX = true
	}
	const safeHeight = props.height + SAFE_AREA_INSET_BOTTOM
	console.log('isIphoneX:', isIphoneX);
	// // ----------
	const onClick = (item) => {
		const itemTemp = Object.assign({}, item)
		if (active.value != itemTemp.name) {
			emit('change', itemTemp)
		}
		emit('click', itemTemp)
	}
	for (let i in props.tabbars) {
		if (active.value == props.tabbars[i].name) {
			emit('change', Object.assign({}, props.tabbars[i]))
			break;
		}
	}
</script>

<style lang="scss" scoped>
	.lj-tabbar-item {
		display: flex;
		flex-direction: column;
		justify-content: center;

		.icon-image-box {
			display: flex;
			justify-content: center;
			position: relative;

			.dot {
				position: absolute;
				top: -16rpx;
				left: 50%;
				background-color: red;
				border-radius: 50%;
				padding: 4rpx;
				font-size: 16rpx;
				color: white;
				text-align: center;
				min-width: 18rpx;
			}
		}


	}
</style>
